<!--
 * @Author: wangming
 * @Date: 2021-05-25 16:54:21
 * @LastEditors: wangming
 * @LastEditTime: 2021-09-15 15:27:20
 * @Description: 左右布局
-->
<script lang="jsx">
import { Throttle } from '@/utils/decorator';
import layoutBox from './layoutBox';
export default {
  components: { layoutBox },
  props: {
    formList: {
      type: Array,
      default: () => [],
    },
    layout: {
      type: Object,
      default: () => ({}),
    },
     formData: {
      type: Object,
      default: () => {},
    },
  },
  async created() {
    this.Asidewidth = ~~this.layout.data.Asidewidth;
    this.Footerwidth = ~~this.layout.data.Footerwidth;
  },
  render() {
    return (
      <div class='container   ks-row ' ref='container'>
        {this.layoutList}
      </div>
    );
  },
  data() {
    return {
      Asidewidth: 200,
      Footerwidth: 200,
      clientStartX: 0,
      clientStartY: 0,
    };
  },
  computed: {
    getlineY() {
      return (
        <div
          class={this.layout.data.AsideResize ? 'touch' : 'destouch'}
          onmousedown={this.moveDomdown}
        ></div>
      );
    },
    getlineX() {
      return (
        <div
          class={this.layout.data.FooterResize ? 'touchY' : 'destouchY'}
          onmousedown={this.moveDomdownY}
        ></div>
      );
    },
    getFooter() {
      return (
        <div style={{  height: this.Footerwidth + 'px'}} class='rel sz'>
          <layoutBox list={this.layout.Footer} formData={this.formData} class="container sz ova"></layoutBox>
        </div>
      );
    },
    getAside() {
      return (
        <div style={{ width: this.Asidewidth + 'px' }} class=' rel sz'>
          <layoutBox list={this.layout.Aside} formData={this.formData} class="container sz ova"></layoutBox>
        </div>
      );
    },
    layoutList() {
      let styleType = this.layout.styleType;
      if (styleType === 'leftAside') {
        return [this.getAside, this.getlineY, this.getMain(this.formList)];
      } else {
        return [this.getMain(this.formList), this.getlineY, this.getAside];
      }
    },
  },
  methods: {
    getMain(formList) {
      return (
        <div class='ks-col main  sz ' style='width:50%' ref='containerY'>
          <layoutBox list={formList} formData={this.formData} class="container sz ova"></layoutBox>
          {this.getlineX}
          {this.getFooter}
        </div>
      );
    },
    @Throttle()
    moveHandleX(nowClientX, offsetWidth) {
      let computedX = nowClientX - this.clientStartX;
      let changeWidth =
        this.transformWidth(this.Asidewidth, offsetWidth) + computedX;
      if (changeWidth < 10) {
        changeWidth = 10;
      }
      this.Asidewidth = this.transformWidth(changeWidth, offsetWidth);
      this.clientStartX = nowClientX;
    },
    transformWidth(width, offsetWidth) {
      if (this.layout.styleType === 'rightAside') {
        return offsetWidth - width;
      } else {
        return width;
      }
    },
    moveDomdown(e) {
      if (!this.layout.data.AsideResize) return;
      let offsetWidth = this.$refs.container.offsetWidth;
      this.clientStartX = e.clientX;
      e.preventDefault();
      document.onmousemove = (e) => {
        this.moveHandleX(e.clientX, offsetWidth);
      };
      document.onmouseup = (e) => {
        document.onmouseup = null;
        document.onmousemove = null;
      };
    },
    @Throttle()
    moveHandleY(nowClientX, offsetHeight) {
      let computedX = nowClientX - this.clientStartY;
      let changeWidth = offsetHeight - this.Footerwidth + computedX;
      if (changeWidth < 10) {
        changeWidth = 10;
      }
      this.Footerwidth = offsetHeight - changeWidth;
      this.clientStartY = nowClientX;
    },
    moveDomdownY(e) {
      if (!this.layout.data.FooterResize) return;
      let offsetHeight = this.$refs.containerY.offsetHeight;
      this.clientStartY = e.clientY;
      e.preventDefault();
      document.onmousemove = (e) => {
        this.moveHandleY(e.clientY, offsetHeight);
      };
      document.onmouseup = (e) => {
        document.onmouseup = null;
        document.onmousemove = null;
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  width: 100%;
}
.touch {
  cursor: col-resize;
  border-right: 2px solid #dedede;
}
.destouch {
  border-right: 2px solid #f1f1f1;
}
.main {
  display: flex;
  flex-direction: column;
}
.touchY {
  cursor: row-resize;
  border-bottom: 2px solid #dedede;
}
.destouchY {
  border-bottom: 2px solid #f1f1f1;
}
</style>
